banner {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%;  background-size: cover
}
banner box {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  overflow: hidden;
}
banner box slogan {
  width: 200px; display: block; font-size: 4.8rem; color: #ffffff; text-align: center; position: absolute; bottom: 18%; left: calc(50% - 100px);
}
banner box subtitle {
  width: 200px; display: block; padding: var(--page-gap) 0px; font-size: 1.6rem; color: #ffffff; text-align: center; position: fixed; bottom: 8%; left: calc(50% - 100px);
}
banner box a {
  width: 100%;
  display: block;
  height: 100%;
}
banner box a img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
banner box a.more {
  display: block; width: 160px; margin: auto; margin-top: 10px; padding: 10px; border: #ffffff 2px solid; color: #ffffff; font-size: 1.4rem; text-align: center; border-radius: 10px; transition: border-radius .3s ease
}
banner box a.more:hover {
  border-radius: 0px
}